<template>
  <Layout id="components-layout-demo-custom-trigger">
    <Sider
      v-model="collapsed"
      :trigger="null"
      collapsible
    >
      <div class="logo" />
      <Menu
        theme="dark"
        mode="inline"
        :selected-keys="[current]"
        @click="handleMenuClick"
      >
        <Item key="1">
          <Icon type="table" />
          <span>nav 1</span>
        </Item>
        <Item key="2">
          <Icon type="laptop" />
          <span>nav 2</span>
        </Item>
        <Item key="3">
          <Icon type="video-camera" />
          <span>nav 3</span>
        </Item>
      </Menu>
    </Sider>
    <Layout>
      <Header style="background: #fff; padding: 0">
        <Icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <span class="title">铁路信息数据可视化</span>
      </Header>
      <Content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <router-view />
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import { Layout, Menu, Icon } from "ant-design-vue";

const { Sider, Header, Content } = Layout;
const { Item } = Menu;

export default {
  data() {
    return {
      collapsed: false,
      current: "1",
    };
  },
  components: {
    Layout,
    Sider,
    Header,
    Content,
    Menu,
    Item,
    Icon,
  },
  methods: {
    handleMenuClick(e) {
      this.current = e.key;
      if (e.key == "1") {
        this.$router.push("/home/tabledetail");
      } else if (e.key == "2") {
        this.$router.push("/home/chart");
      }else if (e.key == "3") {
        this.$router.push("/home/linechart");
      }
    },
  },
};
</script>
<style scoped>
#components-layout-demo-custom-trigger {
  height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.title{
  font-size: 28px;
  /* background-color: #afe; */
  margin-left:300px;
}
</style>